<template>
  <div class="spl-container">
    <breadcrumb :data="pathData"></breadcrumb>
    <div class="emp-container pt-100">
      <div class="text-center">
        <div style="display: inline-block">
          <div class="text-left">
            当前余额 <span class="text-orange ml-5 mr-5 ml-20 fw-blod" v-text="'¥'+balanceAmount"></span>
          </div>
          <div class="text-center mt-40">
            <label class="label-text">充&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;值</label>
            <el-input class="w-220 ml-15" v-model="moneyValue">
              <span slot="suffix">元</span>
            </el-input>
            <el-button type="primary" class="opt-btn orange-btn ml-30 s-btn" :loading="isLoading" @click="rechargeSubmit">充值</el-button>
          </div>
        </div>
      </div>
      <div class="text-center mt-60">
        <div style="display: inline-block">
          <el-divider content-position="left">请汇款至以下账户</el-divider>
          <div class="pl-70 text-left">
            <p class="detail-text" style="margin-top: 40px;" v-text="'账户全称：'+accountFullName"></p>
            <p class="detail-text" v-text="'开户银行：'+bankName"></p>
            <p class="detail-text" v-text="'银行账号：'+bankAccount"></p>
            <p class="detail-text" v-html="'对账识别码：'+identificationCode+'&nbsp;&nbsp;（请您在充值转账时，务必填写［备注］并只填写此识别码，以便进行系统对账）'"></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 导航
      pathData: [
        { name: '财务' },
        { name: '账户明细', path: '/accountDetails' },
        { name: '充值', path: '/recharge?accountId='+ this.accountId +'&balanceAmount=' + this.balanceAmount}
      ],
      accountId: '',
      balanceAmount: '0',
      moneyValue : '',
      isLoading: false,
      accountFullName: '',
      bankName: '',
      bankAccount: '',
      identificationCode: ''
    }
  },
  created () {
    this.$nextTick(() => {
      this.getAccountBalanceAmount()
    })
  },
  methods: {
    getAccountBalanceAmount (){
      this.$http({
        url:'/account/fetchAccount',
        method: 'get',
        params: {

        }
      }).then(({data}) => {
        this.accountId = data.id
        this.balanceAmount = data.totalBalanceAmount
        this.accountFullName = data.accountName
        this.bankName = data.bankName
        this.bankAccount = data.bankAccount
        this.identificationCode = data.identificationCode
      })
    },
    rechargeSubmit(){
        this.isLoading = true
        if(!(this.moneyValue && this.moneyValue>0)){
          this.$message({
            message: "请输入充值金额",
            type: 'error'
          })
          this.isLoading = false
          return false
        }

        this.$http({
          url: '/account/save/accountDetail',
          method: 'post',
          data:{
            accountId: this.accountId,
            amount: this.moneyValue
          }
        }).then(({data}) =>{
          var that = this
          this.$message({
            message: "充值成功",
            type: 'success',
            duration: 1000,
            onClose :function(){
              that.isLoading = false
              that.$router.push('/accountDetails')
            }
          })

        }).catch((data) => {
          this.isLoading = false
          this.$message({
            message: '系统异常',
            type: 'error'
          })
        })
    }
  }
}
</script>
<style lang="less" scoped>
  .detail-text{
    margin-top: 20px;
  }
</style>
